<template>
  <el-card class="sku-list">
    <el-table border stripe :data="skuList" v-loading="loading">
      <el-table-column type="index" label="序号" width="80" align="center" row-key="id" />
      <el-table-column prop="skuName" label="名称" />
      <el-table-column prop="skuDesc" label="描述" />
      <el-table-column label="默认图片" width="150" align="center">
        <template slot-scope="{row,$index}">
          <img :src="row.skuDefaultImg" alt="商品图片" style="width: 80px;">
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量(KG)" />
      <el-table-column prop="price" label="价格(元)" width="80" />
      <el-table-column label="操作" width="250" align="center">
        <template slot-scope="{row,$index}">
          <HintButton v-if="row.isSale === 0" title="上架" type="info" size="mini" icon="el-icon-top" @click="onSale(row.id)" />
          <HintButton v-else title="下架" type="success" size="mini" icon="el-icon-bottom" @click="cancelSale(row.id)" />
          <HintButton title="修改" type="primary" size="mini" icon="el-icon-edit" @click="toUpdateSku(row.id)" />
          <HintButton title="查看详情" type="info" size="mini" icon="el-icon-info" @click="showSkuInfo(row.id)" />
          <el-popconfirm :title="`确定删除 ${row.skuName} 吗？`" @onConfirm="deleteSku(row.id)">
            <HintButton slot="reference" type="danger" size="mini" icon="el-icon-delete" title="删除"></HintButton>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination :current-page="page" :total="total" :page-size="limit" :page-sizes="[5, 10, 20, 30, 40, 50]" style="padding: 20px 0; text-align: center;" layout="prev, pager, next, jumper, ->, sizes, total" @current-change="getSkuList" @size-change="changeSize" />

    <!-- 抽屉 -->
    <el-drawer :visible.sync="isShowSkuInfo" :with-header="false" size="50%">
      <el-row>
        <el-col :span="5">名称</el-col>
        <el-col :span="16">{{ skuInfo.skuName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">描述</el-col>
        <el-col :span="16">{{ skuInfo.skuDesc }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">价格</el-col>
        <el-col :span="16">{{ skuInfo.price }} 元</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">平台属性</el-col>
        <el-col :span="18">
          <el-tag type="success" style="margin-right: 10px" v-for="value in skuInfo.skuAttrValueList" :key="value.id">
            {{ value.attrId + '-' + value.valueId }}
          </el-tag>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">商品图片</el-col>
        <el-col :span="16">
          <!-- 轮播图 -->
          <el-carousel class="sku-carousel" trigger="click" height="400px">
            <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id">
              <img :src="item.imgUrl" style="width: 100%; height: 100%;">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </el-card>
</template>

<script>
export default {
  name: 'SkuList',
  data () {
    return {
      page: 1,
      limit: 10,
      total: 0,
      skuList: [], // SKU列表
      loading: false, // 是否正在加载中
      skuInfo: {},
      isShowSkuInfo: false
    }
  },
  mounted () {
    this.getSkuList()
  },
  methods: {
    // 获取 Sku 列表
    async getSkuList (page = 1) {
      this.page = page
      this.loading = true
      const result = await this.$API.sku.getList(this.page, this.limit)
      if (result.code === 200) {
        this.skuList = result.data.records
        this.total = result.data.total
      }
      this.loading = false
    },
    changeSize (size) {
      this.limit = size
      this.getSkuList()
    },
    // 上架
    async onSale (skuId) {
      const result = await this.$API.sku.onSale(skuId)
      if (result.code === 200) {
        this.$message({
          type: 'success',
          message: '上架成功!'
        })
        this.getSkuList(this.page)
      }
    },
    // 下架
    async cancelSale (skuId) {
      const result = await this.$API.sku.cancelSale(skuId)
      if (result.code === 200) {
        this.$message({
          type: 'success',
          message: '下架成功!'
        })
        this.getSkuList(this.page)
      }
    },
    toUpdateSku (skuId) {
      this.$message.info('正在开发中...')
    },
    // 获取 Sku 详情
    async showSkuInfo (id) {
      this.isShowSkuInfo = true
      const result = await this.$API.sku.get(id)
      if (result.code === 200) {
        this.skuInfo = result.data
      }
    },
    // 删除 Sku
    async deleteSku (skuId) {
      try {
        await this.$API.sku.remove(skuId)
        this.$message.success('删除成功')
        this.getSkuList()
      } catch (error) {
        this.$message.error('删除失败')
      }
    }
  }
}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

/*
  scoped 属性
    作用: 样式只针对于当前组件生效
    原理:
      对于一个组件 style 添加了 scoped 属性,会给当前所有子组件的结构中都添加一个 data-v-xxx 的自定义属性,然后通过属性选择器,给需要添加的元素添加样式
    注:
      如果子组件的根标签(会拥有父组件当中的自定义属性)和父组件中书写的样式相同,也会添加上相应的样式

  深度选择器
    作用: 在父组件添加了 scoped 属性的 style 中添加能够影响子组件的样式,可以使用深度选择器达到样式穿透的效果
    用法:
      原生 css    >>>
      less        /deep/
      scss        ::v-deep

  scoped 属性添加和不添加的区别
			scoped 不写,那么当前组件的样式会影响其它组件
			scoped 写上，把样式作用在当前组件内部及子组件的根元素身上
			
  scoped 如何把样式作用在本组件和子组件根元素身上
    加了 scoped 就会有唯一的一个标识值,而这个标识数据会作为被影响到的元素的属性
    这个元素的样式会在选择器的最右侧添加这个属性选择器
  例: 
    不加 scoped   
      h2{
        color:hotpink
      }
    加了 scoped
      h2[data-v-6c1c67aa]{
        color:hotpink
      }
  
  scoped 中有些元素直接添加样式就会生效,而有些元素直接添加样式就不会生效
    原因: scoped 只能把样式作用延长到自身元素还有子组件的根元素身上
        如果在 scoped 书写的样式,刚好是作用在子组件的根元素身上,就会生效
        如果在 scoped 书写的样式,不是作用在子组件根元素而是子组件根元素内部元素身上,就不会生效

  加了 scoped 还想让子组件根元素内部元素的样式生效(使用深度作用选择器)
      1、把子组件内部元素的样式重新写一个 style 写,不加 scoped,用的不多
      2、深度作用选择器 
          原生 css    >>>
          less        /deep/
          scss        ::v-deep

  添加深度作用选择器 css 怎么处理的
    不加深度作用选择器的时候, scoped 的唯一标识会作为属性选择器添加在 css 选择器最右侧选中的元素身上去限制
    添加了深度作用选择器的时候, scoped 的唯一标识会作为属性选择器添加在 css 选择器最左侧元素身上,限制不了选中的元素	
 */
<style  scoped>
.el-row .el-col-5 {
  font-size: 18px;
  text-align: right;
}
.el-col {
  margin: 10px 10px;
}
/* 深度选择器 */
>>> .el-carousel__button {
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
}
</style>